<script setup lang="ts">
import { routesConstants } from '@/routes'
import { NButton, NDataTable } from 'naive-ui'
import { h, onMounted, ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'

const router = useRouter()
let listRef = ref([])
onMounted(() => {
  const data = routesConstants.map((eachRoute, index) => ({
    index: index,
    path: eachRoute.path,
    name: eachRoute.name,
    desc: eachRoute.desc,
    disabled: eachRoute.disabled
  }))
  listRef.value = data
})


const createColumns = () => {
  return [
    {
      title: 'index',
      key: 'index'
    },
    {
      title: 'name',
      key: 'name'
    },
    {
      title: 'link',
      key: 'path',
      render(row) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            disabled: row.disabled,
            onClick: () => {
              router.push({
                name: row.name
              })
            }
          },
          { default: () => row.path }
        )
      }
    },
    {
      title: 'desc',
      key: 'desc'
    }
  ]
}
const columns = createColumns()

</script>

<template>
  <n-data-table
    :columns="columns"
    :data="listRef"
    :bordered="false"
  />
</template>

<style scoped>

</style>
